第一章：CSS與文件（2）

第 11 屆 iThome 鐵人賽

DAY 2

Modern Web

CSS大全閱讀筆記系列第 2 篇

11th鐵人賽

Camellus

2019-09-18 22:48:02

924 瀏覽

分享至

樣式表介紹：
a. 樣式表內不能有任何的HTML標記，但可以使用HTML註解（）。
b. 結構：選擇器{屬性1: 數值A; 屬性2: 數值B;}
- 大括弧內稱為宣告區塊，區塊內屬性和同一組數值用冒號隔開，稱為宣告，宣告予宣告之間用分號區隔。
- ex：h1 {color: red; font-size: 12px;}
c. 廠商字首：
- 用來讓瀏覽器廠商標記實驗或私有的CSS屬性，在舊程式碼中仍常見。
- 常見的廠商字首：
-epud-：國際數位出版論壇的ePub格式
-moz-：以Mozilla為基礎的瀏覽器（如Firefox）
-ms-：微軟的IE瀏覽器
-o-：以Opera為基礎的瀏覽器
-webkit-：以Webkit為基礎的瀏覽器（如Safari、Chrome）
d. 空白處理：CSS會將連續空白合併為一個，所以排版時選擇舒服的方式即可。
e. CSS註解：
- 用法：/*......*/
- 可以單行，也可延伸多行，但不允許巢狀註解。
- 可以放在任意位置，因為CSS剖析器會默認註解不存在。
媒體查詢：
a. @media 媒體類型 {......}
b. 使用位置：
- link元素的media屬性。
- style元素的media屬性。
- @import宣告的媒體描述子部分。
- @media宣告的媒體描述子部分。
c. 媒體類型：
- all：所有的呈現媒體。
- print：列印文件使用，包含文件的列印預覽效果。
- screen：在桌上型電腦螢幕等螢幕媒體瀏覽器呈現時使用。
- 複數個媒體類型可以用逗號區隔，以使用同一份樣式表。
d. 媒體描述子：
- @media all and (min-width: 800px) {......}
- 媒體描述子由媒體類型加上數個條列的媒體特性組成，其中媒體特性描述子會用括弧包住，預設為all（可省略），格式和CSS的寫法相似，但如(color)屬性（媒體是否支援彩色？）等某些屬性可以只指定名稱，不給數值。
- and：連結多個媒體屬性，條件必須都滿足才會套用區塊內的樣式表。
- not：滿足所有條件（條件間可以用and連結），則取消使用區塊內的樣式表，且not必須放在媒體查詢的開頭，太過老舊的瀏覽器不支援。
- only：只能用在媒體查詢開頭，在支援的瀏覽器上會使用區塊內的樣式表，不支援的瀏覽器則會因為不合法而忽略。
特性查詢：
a. @supports (屬性: 值) {......}
b. 在支援特定屬性和值時才套用區塊內的規則，和媒體查詢很類似，太老舊的瀏覽器會忽略。
c. 可以和媒體查詢一起使用，但必須遵守媒體查詢的寫法。
d. 檢測條件一定要寫屬性和值，因為某些屬性可能在早期就支援，但新增加的值卻不支援舊瀏覽器，例如display是早期就出現的屬性，但display: grid中的grid值在舊瀏覽器中卻不支援。